<template>
	<view>
		<uv-navbar
			:leftIconColor="navstyle.txtColor"
			:titleStyle="titleStyle"
			:title="navstyle.title"
			:leftIcon="navstyle.leftIcon"
			:bgColor="navstyle.bgColor"
			:fixed="false" 
			@leftClick="leftClick"
			:safeAreaInsetTop="false">
		</uv-navbar>
		<view class="password_box">
			<view class="password_list">
				<view class="password_laber">设为默认地址</view>
				<view class="right">
					<uv-switch v-model="userForm.adress" size="25"></uv-switch>
				</view>
			</view>
			<view class="password_list">
				<view class="password_laber">收货人</view>
					<input type="text" v-model="userForm.name" class="uni-input" />
			</view>
			<view class="password_list">
				<view class="password_laber">手机号码</view>
				<input type="number" v-model="userForm.phone" class="uni-input" />
			</view>
			<view class="password_list">
				<view class="password_laber">收货地址</view>
				<view class="uni-input">
					{{userForm.place}}
				</view>
			</view>
			<view class="password_list">
				<view class="password_laber" style="width: 30%;">重新设置详细地址</view>
				<view class="right">
					<uv-switch v-model="reseat" size="25"></uv-switch>
				</view>
			</view>
			<view v-if="reseat" class="password_list" @click="open">
				<view class="password_laber">所在地区</view>
				<input type="text" v-model="addressName" class="uni-input" />
				<uv-icon name="arrow-right"></uv-icon>
				
			</view>
			<view v-if="reseat" class="password_view">
				<view class="password_laber" style="width: 100%; height: 36px; line-height: 36px; text-align: left; padding-left: 15px;">详细地址</view>
				<view class="password_textarea">
					<textarea class="uni-textarea" v-model="userForm.userAddress" maxlength="140"></textarea>
				</view>
			</view>
			<view class="delete">
				<button @click="deleteClick">删除收货地址</button>
			</view>
			<button class="exitbtn" @click="confirmClick()">确定</button>
			<uv-picker ref="picker" 
			:loading="loading"
			:columns="addressList" 
			keyName="name"
			@change="change"
			@confirm="confirm">
			</uv-picker>
		</view>
	</view>
</template>

<script>
	import {setAddress,areaList,editAddress,delAddress} from '@/api/bonus.js';
	export default{
		onLoad(options) {
			this.id =options.id;
			this.userForm.addressId = options.id;
			setAddress(this.id).then(response => {
				this.adressInfo = response.data;
				this.adressInfo.isDefault == 1 ? this.userForm.adress= true :this.userForm.adress= false;
				this.userForm.name = this.adressInfo.name
				this.userForm.phone = this.adressInfo.phone
				this.userForm.userAddress = this.adressInfo.userAddress;
				this.userForm.cityId = this.adressInfo.cityId
				this.userForm.areaId = this.adressInfo.areaId
				this.userForm.provinceId = this.adressInfo.provinceId;
				var a = this.adressInfo.provinceName + this.adressInfo.cityName + this.adressInfo.areaName;
				this.addressName = a,
				this.getData()
				console.log(this.adressInfo,1111)
			});
			
		},
		data(){
			return{
				navstyle: {
					title: "编辑地址",
					txtColor: "#333333",
					bgColor: "#FFFFFF",
					leftIcon: "arrow-left"
				},
				titleStyle: {
					fontWeight: 700
				},
				userForm:{
					adress:false,
					addressId:"",
					name:"",
					phone:"",
					provinceId: "",
					cityId: "",
					areaId: "",
					userAddress: "",
					isDefault: "0",
					provinceName:'',
					cityName:'',
					areaName:'',
				},
				reseat:false,
				addressName:"",
				id:"",
				adressInfo:{},
				loading: true,
				provinces: [], //省
				citys: [], //市
				areas: [], //区
				pickerValue: [0, 0, 0],
				defaultValue: [3442, 1, 2]

			}
		},
		created() {
			this.getData();
		},
		computed: {
			addressList() {
				return [this.provinces, this.citys, this.areas];
			}
		},
		methods:{
			leftClick() {
				uni.reLaunch({
				  url: '/pages/bonus/address' // 替换成上一页的路径
				});
			},
			getData(){
				areaList().then(response=>{
					let data = response.data
					console.log(data,33333)
					console.log('获取的数据：', response);
					this.provinces = data.sort((left, right) => (Number(left.code) > Number(right.code) ? 1 : -1));
					console.log(this.provinces)
					this.handlePickValueDefault()
					setTimeout(() => {
						this.loading = false
					}, 200)
				});
			},
			change(e) {
				if (this.loading) return;
				const { columnIndex, index, indexs } = e
				// 改变了省
				if (columnIndex === 0) {
					this.citys = this.provinces[index]?.children || []
					this.areas = this.citys[0]?.children || []
					this.$refs.picker.setIndexs([index, 0, 0],true)
				} else if (columnIndex === 1) {
					this.areas = this.citys[index]?.children || []
					this.$refs.picker.setIndexs(indexs,true)
				}
			},
			handlePickValueDefault() {
				// 设置省
				this.pickerValue[0] = this.provinces.findIndex(item => Number(item.id) === this.defaultValue[0]);
				// 设置市
				this.citys = this.provinces[this.pickerValue[0]]?.children || [];
				this.pickerValue[1] = this.citys.findIndex(item => Number(item.id) === this.defaultValue[1]);
				// 设置区
				this.areas = this.citys[this.pickerValue[1]]?.children || [];
				this.pickerValue[2] = this.areas.findIndex(item => Number(item.id) === this.defaultValue[2]);
				// 重置下位置
				this.$refs.picker.setIndexs([this.pickerValue[0], this.pickerValue[1], this.pickerValue[2]],true);
			},
			open() {
				this.$refs.picker.open();
				this.handlePickValueDefault()
			},
			confirm(e) {
				this.userForm.provinceId = e.value[0].id,
				this.userForm.provinceName = e.value[0].name,
				this.userForm.cityId = e.value[1].id,
				this.userForm.cityName = e.value[1].name,
				this.userForm.areaId = e.value[2].id,
				this.userForm.areaName = e.value[2].name,
				this.addressName = e.value[0].name + "/" + e.value[1].name + "/" + e.value[2].name
			},
			confirmClick(){
				var reg_tel = /^1[3456789]\d{9}$/;
				if(!this.userForm.name){
					uni.showToast({
						icon: "none",
						title: "请输入收货人姓名"
					})
					return
				}
				if(!this.userForm.phone){
					uni.showToast({
						icon: "none",
						title: "请输入手机号"
					})
					return
				}
				if(!reg_tel.test(this.userForm.phone)){
					uni.showToast({
						icon: "none",
						title: "手机号码格式不正确"
					})
					return
				}
				if(!this.userForm.areaId){
					uni.showToast({
						icon: "none",
						title: "请选择省市区"
					})
					return
				}
				if(!this.userForm.userAddress){
					uni.showToast({
						icon: "none",
						title: "请输入详细地址"
					})
					return
				}
				this.userForm.adress = true ? this.userForm.isDefault = 1 : this.userForm.isDefault = 0;
				delete(this.userForm.adress)
				editAddress(this.userForm).then(res=>{
					if(res.code ==1){
						uni.showToast({
							icon: "none",
							title: res.msg,
							duration: 2000
						})
						uni.reLaunch({
						  url: '/pages/bonus/address' // 替换成上一页的路径
						});
					}
					
					
				})
				
			},
			deleteClick(){
				delAddress({addressId:this.userForm.addressId}).then(res=>{
					if(res.code == 1){
						uni.showToast({
							icon: "none",
							title: res.msg,
							duration: 2000
						})
						uni.reLaunch({
						  url: '/pages/bonus/address' // 替换成上一页的路径
						});
						
					}
				})
			}
		},
		
	}
</script>

<style>
	.password_box{
	    display: flex;
	    flex-direction: column;
	}
	.password_list {
	    display: flex;
	    flex-direction: row;
	    padding: 5px 5px;
	    height: 50px;
	    border-bottom: 1px solid #efefef;
	    align-items: center;
	}
	.password_laber {
	    width: 25%;
	    font-size: 13px;
	    text-align: center;
	}
	.right {
	    margin-left: auto;
	}
	.password_list input {
	    width: 75%;
	    height: 28px;
	    background-color: #fff;
	    padding: 5px 10px;
	    border-radius: 5px;
	    font-size: 13px;
	}
	.delete {
	    margin-top: 3px;
	}
	.delete button {
	    background-color: #fff;
	    border-radius: 0;
	    margin: 0;
	    font-size: 14px;
	    color: #f2180c;
	    text-align: left;
	    border: none;
	}
	.exitbtn {
	    width: 80%;
	    border-radius: 50px;
	    background: linear-gradient(135deg, #d66c6b, #ed6266);
	    font-size: 14px;
	    margin: 32px auto 0 auto;
	    color: #fff;
	    padding: 3px 0;
	    border: none;
	}
	.password_textarea{
	    width: 100%;
	    height: 100px;
	    padding: 0 10px;
	}
	.uni-textarea{
	    width: 90%;
	    height: 100px;
	    border: 1px solid #efefef;
	    border-radius: 4px 4px;
	    padding: 10px 10px;
	}
</style>